<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>四边边框</title>

        <style type="text/css">
            .wrapper { width: 80% ; height: 100px ; margin: 15px auto ; }
            .first {
                /* 使用 border 属性设置元素 四边边框的 粗细 、风格 、颜色 */
                border: 10px dotted blue ;
            }
            .second {
                border-width: 10px ; /* 使用 border-width 属性设置元素四边的边框 粗细 */
                border-style: double ; /* 使用 border-style 属性设置元素四边的边框 风格 */
                border-color: #086e0f ; /* 使用 border-color 属性设置元素四边的边框 颜色 */
            }
        </style>

    </head>
    <body>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>

    </body>
</html>